<% include ./side.html %>
<style scoped>
	.com_top_title:after{
		content:'';
		display:block;
		clear:both;
	}
	table.table{
		background:#fff;
	}
	table.table .light_color th{
		font-weight:400;
	}
	table.table tr td{
		font-size:12px;
	}
	.block-time .item {
		width: 33.33333%;
		float: left;
		border-right: solid 1px #eee;
		overflow: hidden;
		padding: 20px; 
	}
	.block-time .com_h1 {
		font-size: 22px;
		color:#333;
		border-bottom: solid 1px #eee;
		padding-bottom: 10px;
		margin-bottom: 10px; 
	}
	.block-time .item-full {
		width: 100%;
		float: left;
		overflow: hidden;
	}
	.block-time .item-full:nth-child(:odd) {
		border-right: none; 
	}
	.block-time .item-full li {
		width: 25%;
		float: left;
		margin: 8px 0; 
	}
	.block-time .item-full li h1 {
		font-size: 20px;
		color: #999; 
		font-weight:300;
	}
	.block-time .item-full h2 {
		font-size: 30px; 
	}
	.block-time .top-width {
		width: 100% !important; 
	}
	.echartBorwsers {
		width: 100%;
		height: 200px; 
	}
</style>
<div class="com_content_body main pb100" id="pages" v-cloak>
	<div class="com_top_title">
		<h1 class="com_h1 fl">慢页面性能</h1>
		<commonsearch :done="getDataForTime"></commonsearch>
	</div>
	<!-- 页面平均耗时说明 -->
	<div class="com_block block-time mt20">
		<div class="item-full div1">
			<h1 class="com_h1">页面平均耗时</h1>
			<li>
				<h1>平均加载耗时(s)</h1>
				<h2 class="red">{{pagesItemData.load_time|toFixed(true)}}</h2>
			</li>
			<li>
				<h1>平均白屏耗时(ms)</h1>
				<h2 class="red">{{pagesItemData.white_time|toFixed}}</h2>
			</li>
			<li>
				<h1>平均DOM构建耗时(s)</h1>
				<h2 class="red">{{pagesItemData.dom_time|toFixed(true)}}</h2>
			</li>
			<li>
				<h1>调用次数</h1>
				<h2>{{pagesItemData.count||0}}</h2>
			</li>
			<li>
				<h1>平均解析DOM耗时(s)</h1>
				<h2>{{pagesItemData.analysisDom_time|toFixed(true)}}</h2>
			</li>
			<li>
				<h1>平均DNS解析耗时(ms)</h1>
				<h2>{{pagesItemData.dns_time|toFixed}}</h2>
			</li>
			<li>
				<h1>平均TCP连接耗时(ms)</h1>
				<h2>{{pagesItemData.tcp_time|toFixed}}</h2>
			</li>
			<li>
				<h1>平均request请求耗时(ms)</h1>
				<h2>{{pagesItemData.request_time|toFixed}}</h2>
			</li>
			<li>
				<h1>平均页面准备耗时(ms)</h1>
				<h2>{{pagesItemData.ready_time|toFixed}}</h2>
			</li>
		</div>
	</div>
	<div class="mt20">
		<!-- 公共搜索条件 -->
		<div class="com_search">
			<div class="item">
				<div>
					<span class="name">选择日期查询：</span>
					<input id="zane-calendar-1" class="inp w-200" type="text" placeholder="选择日期查询">
				</div>
			</div>
		</div>
		<div class="overflow_table">
			<!-- table列表 -->
			<table class="table" v-if="isLoadend&&listdata.length">
				<tr class="light_color">
					<th>URL</th>
					<th>页面加载时间</th>
					<th>白屏时间</th>
					<th>DOM构建时间</th>
					<th>解析dom耗时</th>
					<th>DNS解析时间</th>
					<th>TCP连接时间</th>
					<th>页面重定向时间</th>
					<th>unload时间</th>
					<th>request请求耗时</th>
					<th>页面准备时间</th>
					<th>访问轨迹</th>
					<th>页面请求时间</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in listdata">
					<td><a :href="'/web/pagesdetails?id='+item._id+'&slowpages'">{{item.url}}</a></td>
					<td class="red tc">{{item.load_time|toFixed(true)}}</td>
					<td class="red tc">{{item.white_time|toFixed}}</td>
					<td class="tc">{{item.dom_time|toFixed(true)}}</td>
					<td class="tc">{{item.analysisDom_time|toFixed}}</td>
					<td class="tc">{{item.dns_time|toFixed}}</td>
					<td class="tc">{{item.tcp_time|toFixed}}</td>
					<td class="tc">{{item.redirect_time|toFixed}}</td>
					<td class="tc">{{item.unload_time|toFixed}}</td>
					<td class="tc">{{item.request_time|toFixed}}</td>
					<td class="tc">{{item.ready_time|toFixed}}</td>
					<td class="tc"><a :href="'/web/analysisdetail?markuser='+item.mark_user">查看轨迹详情</a></td>
					<td class="tc">{{item.create_time|date('/',true)}}</td>
					<td class="tc"><a :href="'/web/pagesdetails?id='+item._id">详情</a></td>
				</tr>
			</table>
		</div>
	</div>
	<div>
		<!--  分页 -->
		<div class="tc common_page_style mt10" v-show="isLoadend&&listdata.length">
			<div id="copot-page-pages" class="copot-page"></div>
		</div>
		<!-- 暂无数据 -->
		<div class="tc mt20" v-if="!listdata.length">暂无数据!</div>
	</div>
</div>

<script>
	new Vue({
		el: '#pages',
		data: function () {
			return {
				pagesItemData: {},
				listdata: [],
				pageNo: 1,
				type:2,
				pageSize: config.pageSize,
				totalNum: 0,
				beginTime: '',
				endTime: '',
				isLoadend: false,
				appId: util.getStorage('local', 'appId'),
				url:'',
			}
		},
		filters: {
			toFixed: window.Filter.toFixed,
			toSize: window.Filter.toSize,
			date: window.Filter.date,
			limitTo: window.Filter.limitTo,
		},
		mounted() {
			const slowpagesItemData = util.getStorage('session', 'slowpagesItemData');
			this.pagesItemData =  slowpagesItemData ? JSON.parse(slowpagesItemData) : {}
			this.url = this.pagesItemData._id.url
			
			this.getDataForTime();
		},
		methods: {
			// 页面性能详情
			getDataForTime(){
				let times = util.getSearchTime()
				this.beginTime = times.beginTime
				this.endTime = times.endTime

				this.getinit();
				this.searchForTime();
				this.getDataGroupBy(1);
				this.getDataGroupBy(2);
				this.getDataGroupBy(3);
			},
			getinit() {
				this.isLoadend = false;
				util.ajax({
					type:'get',
					url: config.baseApi + 'api/v1/pages/getOnePageList',
					data: {
						type:this.type,
						appId:this.appId,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						beginTime: this.beginTime,
						endTime: this.endTime,
						url: this.url,
						type:this.type,
					},
					success: data => {
						this.isLoadend = true;
						if (!data.data.datalist && !data.data.datalist.length) return;
						this.listdata = data.data.datalist
						new Page({
							parent: $('#copot-page-pages'),
							nowPage: this.pageNo,
							pageSize: this.pageSize,
							totalCount: data.data.totalNum,
							callback: (nowPage, totalPage) => {
								this.pageNo = nowPage;
								this.getinit();
							}
						});
					}
				})
			},
			searchForTime(){
				zaneDate({
					elem: '#zane-calendar-1',
					type: 'doubleday',
					format: 'yyyy/MM/dd',
					done: (fulltime, begintime, endtime) => {
						this.beginTime = begintime ? begintime + ' 00:00:00' : '';
						this.endTime = endtime ? endtime + ' 23:59:59' : '';
						this.getinit('api/v1/pages/getOnePageList', '#copot-page-pages');
					},
				});
			},
			gotodetail(item) {
				if (this.slow && this.slow == 'slow') {
					util.setStorage('session', 'slowpagesItemData', JSON.stringify(item))
					location.href = "/slowpages/detail?type=zane"
				} else {
					util.setStorage('session', 'pagesItemData', JSON.stringify(item))
					location.href = "/pages/detail?type=zane"
				}
			},
		}
	})
</script>